<template>
  <div class="hotSaleSetting">
    <div class="ele-title">
      <h3>卖点展示</h3>
      <p class="ele-little-title">最多添加4个卖点，鼠标拖拽调整显示位置，图片尺寸建议300x300像素</p>
      <p class="ele-little-title">标题最多可输入4个字</p>
    </div>
    <div class="content">
      <div v-for="(item,index) in list" :key="index" class="space">
        <HotSaleCard ref="hotSaleCard" :index="index" :card-form="item" />
        <el-button type="danger" class="el-icon-close delete" circle @click="list.splice(index,1)" />
      </div>
      <el-card v-if="list.length<4">
        <el-col :span="24" style="text-align: center;line-height: 50px;height: 50px;margin-top: -20px"><el-button type="text" class="addBtn" @click="addList">添加</el-button></el-col>
      </el-card>
    </div>

  </div>
</template>

<script>
/** 商品 tabs */
import HotSaleCard from '@/views/shop/component/HotSaleCard'
import { addSalePoint, getSalePoint } from '@/api/customAPI/shop/homeSetting'
export default {
  name: 'HotSaleSetting',
  components: {
    HotSaleCard
  },

  data() {
    return {
      model: null,
      list: []
    }
  },
  created() {
    this.list.push({
      id: null,
      name: null,
      url: null
    })
  },
  methods: {
    setModel(model) {
      this.model = parseInt(model)
      getSalePoint().then(res => {
        if (res.data.data) {
          this.list = res.data.data
        }
      })
    },
    addList() {
      this.list.push({
        id: null,
        name: null,
        url: null
      })
    },
    submitSalePoint() {
      const data = []
      if (this.$refs.hotSaleCard && this.$refs.hotSaleCard.length > 0) {
        this.$refs.hotSaleCard.forEach(item => {
          data.push(item.getData())
        })
        if (data.length > 0) {
          addSalePoint({ list: data }).then(res => {
            this.$message.success('添加卖点成功')
          })
        }
      } else {
        return this.$message.error('请添加卖点')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.hotSaleSetting {
  .space {
    position: relative;
    left: 0;
    top: 0;
    margin-bottom: 10px;
    .delete {
      position: absolute;
      right: 0;
      top: 0;
    }
    .addBtn {
      display: block;
      width: 100%;
    }
  }
}
</style>
